<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
        <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
        <META HTTP-EQUIV="expires" CONTENT="0">
    <link rel="stylesheet" href="../../../js/layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-form-item">
    <div class="layui-form-item orderTable" >
        <label class="layui-form-label">商品名：</label>
        <div class="layui-inline">
            <input type="text" name="id" id="productName" required  lay-verify="required" placeholder="请输入商品名" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-btn-group" >
            <button type="button" data-type="search" id="search" class="layui-btn">检索</button>
            <button type="button" data-type="add" id="add" class="layui-btn">增加</button>
        </div>
        <table class="layui-hide" id="orderTable" lay-filter="tableEvent"></table>
    </div>
</div>
<script src="../../../js/layui/layui.js"></script>
<script src="../../../js/myJQ.js"></script>

<script>
    layui.use(['table','jquery','layer'], function(){

        var basePath = getRootPath();
        var table = layui.table;
        var $ = layui.$;
        var layer = layui.layer;
        table.render({
            elem: '#orderTable'
            ,url:'/order/getOrderList'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,id:'productData'
            ,cols: [[
                {field:'productId', width:100, title: '订单ID', sort: true}
                ,{field:'bookingId', width:162, title: '订单号'}
                ,{field:'productName', width:100, title: '商品名'}
                ,{field:'userName', width:100, title: '用户名'}
                ,{field:'num', width:100, title: '数量',templet:function (data) {
                        if(data.num==null||data.price==''){
                            return "0 张"
                        }else {
                            return data.num+"张";
                        }
                    }}
                ,{field:'amount', width:100, title: '总金额',templet:function (data) {
                        if(data.amount==null||data.amount==''){
                            return "0 元"
                        }else {
                            return data.amount+"元";
                        }
                    }}
                ,{field:'address', width:200, title: '地址'}
                ,{field:'insertDate', width:160, title: '下单时间',templet:function (data) {
                        if(data.insertDate!=null&&data.insertDate!="")
                            return layui.util.toDateString(data.insertDate,'yyyy-MM-dd HH:mm:ss');
                        else return ""
                    }}
                ,{field:'updateDate',width:160, title: '更新时间',templet:function (data) {
                        if(data.updateDate!=null&&data.updateDate!="")
                            return layui.util.toDateString(data.updateDate,'yyyy-MM-dd HH:mm:ss');
                        else return""
                    }}
            ]]
        });

        var active = {
            search:function () {
                debugger;
                //执行重载
                table.reload('productData', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        productName: $('#productName').val()
                    }
                }, 'data');
            },
        }

        $('.orderTable .layui-btn,layui-btn-group').on('click',function () {
            var type = $(this).data('type');
            active[type]?active[type].call(this):'';
        });


    });


</script>
</body>
</html>